<template>
  <NuxtLayout name="user" menuActive="5">
    <div class="box">
      <el-timeline>
        <el-timeline-item v-for="item in tableData" :key="item.id" :timestamp="item.paymentTime">
          <div class="order">订单号：{{ item.orderNo }}</div>
          <p>课程名称：{{ item.course ? item.course.title : '-' }}</p>
          <p>课程讲师：{{ item.course ? item.course.author : '-' }}</p>
          <p>总学时：{{ item.course ? item.course.totalHours : '-' }}</p>
          <p>
            <el-tag type="warning" style="margin-right: 15px;">￥{{ item.amount }}</el-tag>
            <el-tag type="success" v-show="item.status == 1">支付成功</el-tag>
            <el-tag type="danger" v-show="item.status == 2">支付失败</el-tag>
            <el-tag type="primary" v-show="item.status == 3">已退款</el-tag>
            <el-tag type="info" v-show="item.status < 1">未支付</el-tag>
            <el-tag type="info" v-show="item.paymentMethod" style="margin-left: 15px;">{{ item.paymentMethod }}</el-tag>
            <el-tag type="primary" v-show="item.paymentSerialNumber" style="margin-left: 15px;">{{ item.paymentSerialNumber }}</el-tag>
          </p>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-show="tableData.length < 1" />
      <div class="pagin" v-show="tableData.length > 0">
        <el-pagination background layout="prev, pager, next, total" :total="total" :page-size="listForm.pageSize"
          @change="pageChangeFn" />
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { DocumentCopy } from '@element-plus/icons-vue'
import { userCoursePurchase } from '~/server/api';
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_购买记录",
  keywords: "技考邦,购买记录",
  description: "技考邦，购买记录。",
  ogTitle: "技考邦_购买记录",
  ogDescription: "技考邦，购买记录。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
})
// 列表
const listForm = ref({
  pageNum: 1,
  pageSize: 10
})
const tableData = ref([])
const total = ref(0)
const getList = async () => {
  let { data: listRes } = await useAsyncData('userCoursePurchase', () => useServerRequest(userCoursePurchase, {
    method: 'post',
    body: JSON.stringify(listForm.value)
  }))
  if (listRes.value && listRes.value.errno === 0) {
    tableData.value = listRes.value.result.list;
    total.value = listRes.value.result.total;
  }
}
getList()
// 分页
const pageChangeFn = (val) => {
  useRouter().push(`/userCenter/PurchaseRecords?p=${val}`)
}
// 监听
watchEffect(() => {
  // 分页
  if (useRoute().query.p) {
    listForm.value.pageNum = useRoute().query.p;
    getList()
  }
})
</script>

<style lang="less" scoped>
.box {
  padding: 30px;

  .pagin {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>